<template>
  <div class="zc-view" id="groupApplyCheckAdd">
    <div class="zc-view-box">
      <el-form
        :inline="true"
        ref="collectiveApplyVo"
        label-position="right"
        label-width="220px"
        :model="validateForm.collectiveApplyVo"
        :rules="rules.collectiveApplyVo"
        class="demo-form-inline"
      >
        <div class="zc-view-box-center">
          <div class="title">基本信息</div>
          <div class="form" style="padding-top:35px;overflow: hidden;">
            <el-col :span="12">
              <el-form-item label="集体名称：" prop="applicantName">
                <el-input v-model="validateForm.collectiveApplyVo.applicantName" placeholder="请填写集体名称"></el-input>
              </el-form-item>
              <el-form-item label="代表人：" prop="representName">
                <el-input v-model="validateForm.collectiveApplyVo.representName" placeholder="请填写代表人"></el-input>
              </el-form-item>
              <el-form-item label="联系人：" prop="contactName">
                <el-input v-model="validateForm.collectiveApplyVo.contactName" placeholder="请填写联系人"></el-input>
              </el-form-item>
              <el-form-item label="手机号码：" prop="mobilePhone">
                <el-input v-model="validateForm.collectiveApplyVo.mobilePhone" placeholder="请填写手机号码"></el-input>
              </el-form-item>
              <el-form-item label="区域：" prop="regionId">
                <el-cascader style="width: 300px" v-model="regionArr" :props="props"></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item class="layout-line" label="组织机构代码证号：" prop="applicantNum">
                <el-input v-model="validateForm.collectiveApplyVo.applicantNum" placeholder="请填写组织机构代码证号"></el-input>
              </el-form-item>
              <el-form-item label="代表人身份证号：" prop="representNum">
                <el-input v-model="validateForm.collectiveApplyVo.representNum" placeholder="请填写代表人身份证号"></el-input>
              </el-form-item>
              <el-form-item label="座机号码：">
                <el-input v-model="validateForm.collectiveApplyVo.fixedPhone" placeholder="请填写座机号码"></el-input>
              </el-form-item>
              <el-form-item label="通讯地址：" prop="address">
                <!-- <el-cascader @change="changeArea1" style="width: 300px" v-model="regionArr" :props="props"></el-cascader> -->
                <el-input v-model="validateForm.collectiveApplyVo.address" placeholder="请填写通讯地址"></el-input>
              </el-form-item>
            </el-col>
          </div>
        </div>
        <div class="zc-view-box-center">
          <div class="title">账户信息</div>
          <div class="form" style="padding-top:35px;overflow: hidden;">
            <el-col :span="12">
              <el-form-item label="户名：" prop="accountName">
                <el-input v-model="validateForm.collectiveApplyVo.accountName" placeholder="请填写户名"></el-input>
              </el-form-item>
              <el-form-item label="账号：" prop="accountNum">
                <el-input v-model="validateForm.collectiveApplyVo.accountNum" placeholder="请填写开户行账号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开户行：" prop="accountBank">
                <el-input v-model="validateForm.collectiveApplyVo.accountBank" placeholder="请填写开户行"></el-input>
              </el-form-item>
            </el-col>
          </div>
        </div>
        <div class="zc-view-box-center">
          <div class="title">权证信息</div>
          <div class="form" style="padding-top:35px;overflow: hidden;">
            <el-col :span="12">
              <el-form-item label="证件类型：" prop="certificateTypeId">
                <el-select v-model="validateForm.collectiveApplyVo.certificateTypeId" placeholder="--请选择--">
                  <el-option v-for="(item, index) in CERTIFICATE_TYPE" :key="index" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
              <el-form-item label="发证时间：" prop="issueCertificateDate">
                <el-date-picker value-format="yyyy-MM-dd" v-model="validateForm.collectiveApplyVo.issueCertificateDate" type="date" placeholder="选择日期"></el-date-picker>
              </el-form-item>
              <el-form-item label="代表人：" prop="obligeeName">
                <el-input v-model="validateForm.collectiveApplyVo.obligeeName" placeholder="请填写代表人"></el-input>
              </el-form-item>
              <el-form-item class="layout-line" label="是否愿意预留农村发展指标：" prop="isRemain">
                <el-select v-model="validateForm.collectiveApplyVo.isRemain" placeholder="--请选择--">
                  <el-option label="是" value="YES"></el-option>
                  <el-option label="否" value="NO"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证件号码：" prop="certificateNum">
                <el-input v-model="validateForm.collectiveApplyVo.certificateNum" placeholder="请填写证件号码"></el-input>
              </el-form-item>
              <el-form-item label="土地使用权面积：" prop="landArea">
                <el-input v-model="validateForm.collectiveApplyVo.landArea" placeholder="请填写土地使用权面积">
                  <span slot="suffix">㎡</span>
                </el-input>
              </el-form-item>
              <el-form-item label="土地坐落：" prop="landAddress">
                <el-input v-model="validateForm.collectiveApplyVo.landAddress" placeholder="请填写土地坐落"></el-input>
              </el-form-item>
            </el-col>
          </div>
        </div>
      </el-form>      
      <div class="zc-view-box-center">
        <div class="module-item">
          <div class="title">附件信息</div>
          <div class="module-item-content" style="padding-top:10px;overflow: hidden;">
            <el-table :data="fileList" highlight-current-row>
              <el-table-column type="index" label="序号"></el-table-column>
              <el-table-column prop="type" label="类型" width="400"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <upload @beforeUpload="handleBeforeUpload" @res="handleUpload($event, scope.$index)" />
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <el-form
        ref="collectiveTownAuditVo"
        :model="validateForm.collectiveTownAuditVo"
        :rules="rules.collectiveTownAuditVo"
        class="zc-view-box-center"
        label-width="120px"
        label-position="right"
      >
        <div class="module-item">
          <div class="title">附件信息审核</div>
          <div class="module-item-content" style="padding-top:35px;overflow: hidden;">
            <div class="form-inline-item">
              <el-form-item class="fujianShenClass" label="1、集体经济组织民主决策程序审查同意证明材料审核" prop="attachment1Audit">
                <el-radio-group v-model="validateForm.collectiveTownAuditVo.attachment1Audit">
                  <el-radio label="YES">通过</el-radio>
                  <el-radio label="NO">未通过</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item class="fujianShenClass" label="2、身份证正面审核," prop="attachment2Audit">
                <el-radio-group v-model="validateForm.collectiveTownAuditVo.attachment2Audit">
                  <el-radio label="YES">通过</el-radio>
                  <el-radio label="NO">未通过</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item class="fujianShenClass" label="3、身份证反面审核" prop="attachment3Audit">
                <el-radio-group v-model="validateForm.collectiveTownAuditVo.attachment3Audit">
                  <el-radio label="YES">通过</el-radio>
                  <el-radio label="NO">未通过</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item class="fujianShenClass" label="4、权证证明审核" prop="attachment4Audit">
                <el-radio-group v-model="validateForm.collectiveTownAuditVo.attachment4Audit">
                  <el-radio label="YES">通过</el-radio>
                  <el-radio label="NO">未通过</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </div>
        </div>
        <div class="module-item">
          <div class="title">审核信息 - 乡镇街道意见</div>
          <div class="module-item-content" style="padding-top:35px;overflow: hidden;">
            <div class="form-inline-item">
              <el-form-item label="1、申请人信息是否属实？" prop="option1Audit">
                <el-radio-group @change="changeType($event,1)" v-model="validateForm.collectiveTownAuditVo.option1Audit">
                  <el-radio label="YES">是</el-radio>
                  <el-radio label="NO">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item class="explain" label="说明：" prop="option1Explain" v-if="option1Type">
                <el-input
                  type="textarea"
                  v-model="validateForm.collectiveTownAuditVo.option1Explain"
                />
              </el-form-item>
              <el-form-item label="2、代表人信息是否属实？" prop="option2Audit">
                <el-radio-group @change="changeType($event,2)" v-model="validateForm.collectiveTownAuditVo.option2Audit">
                  <el-radio label="YES">是</el-radio>
                  <el-radio label="NO">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item class="explain" label="说明：" prop="option2Explain" v-if="option2Type">
                <el-input
                  type="textarea"
                  v-model="validateForm.collectiveTownAuditVo.option2Explain"
                />
              </el-form-item>
              <el-form-item label="3、土地权属关系是否真实有效？" prop="option3Audit">
                <el-radio-group @change="changeType($event,3)" v-model="validateForm.collectiveTownAuditVo.option3Audit">
                  <el-radio label="YES">是</el-radio>
                  <el-radio label="NO">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item class="explain" label="说明：" prop="option3Explain" v-if="option3Type">
                <el-input
                  type="textarea"
                  v-model="validateForm.collectiveTownAuditVo.option3Explain"
                />
              </el-form-item>
              <el-form-item label="4、申请资料要件是否齐全？" prop="option4Audit">
                <el-radio-group @change="changeType($event,4)" v-model="validateForm.collectiveTownAuditVo.option4Audit">
                  <el-radio label="YES">是</el-radio>
                  <el-radio label="NO">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item class="explain" label="说明：" prop="option4Explain" v-if="option4Type">
                <el-input
                  type="textarea"
                  v-model="validateForm.collectiveTownAuditVo.option4Explain"
                />
              </el-form-item>
              <el-form-item label="5、申请复垦的宅基地是否在城镇扩展边界之外？" prop="option5Audit">
                <el-radio-group @change="changeType($event,5)" v-model="validateForm.collectiveTownAuditVo.option5Audit">
                  <el-radio label="YES">是</el-radio>
                  <el-radio label="NO">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item class="explain" label="说明：" prop="option5Explain" v-if="option5Type">
                <el-input
                  type="textarea"
                  v-model="validateForm.collectiveTownAuditVo.option5Explain"
                />
              </el-form-item>
              <el-form-item label="6、申请人填写信息是否完整规范准确？" prop="option6Audit">
                <el-radio-group @change="changeType($event,6)" v-model="validateForm.collectiveTownAuditVo.option6Audit">
                  <el-radio label="YES">是</el-radio>
                  <el-radio label="NO">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item class="explain" label="说明：" prop="option6Explain" v-if="option6Type">
                <el-input
                  type="textarea"
                  v-model="validateForm.collectiveTownAuditVo.option6Explain"
                />
              </el-form-item>
            </div>
            <div class="layout-box">
              <el-divider></el-divider>
              <span class="title">乡镇经过审查</span>
              <el-form-item label="是否同意上报：" prop="auditResult">
                <el-radio-group v-model="validateForm.collectiveTownAuditVo.auditResult">
                  <el-radio label="APPROVED">同意</el-radio>
                  <el-radio label="REJECTED">不同意</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="村审核人姓名：" prop="auditUserId">
                <el-select
                  @change="handleAuditUserChange($event)"
                  placeholder="--请选择--"
                  v-model="validateForm.collectiveTownAuditVo.auditUserId"
                >
                  <el-option
                    v-for="(item, index) in auditorData"
                    :key="index"
                    :label="item.name"
                    :value="item.userId"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="村审核人职务：">
                <el-input readonly v-model="auditorItem1.position" placeholder="请选择村审核人" />
              </el-form-item>
              <el-form-item label="联系电话：">
                <el-input readonly v-model="auditorItem1.mobilePhone" placeholder="请选择村审核人" />
              </el-form-item>
              <el-form-item label="审核日期：" prop="auditTime">
                <el-date-picker
                  value-format="yyyy-MM-dd" 
                  type="date"
                  placeholder="--请选择--"
                  v-model="validateForm.collectiveTownAuditVo.auditTime"
                ></el-date-picker>
              </el-form-item>
            </div>
          </div>
        </div>
      </el-form>
      
      
      <div style="margin:20px">
        <el-button @click="handleSubmit" :loading="btnLoading" type="primary">提交</el-button>
        <el-button>取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import xTable from "@/views/xtable.vue";
import upload from "@/views/upload";
import {
  queryAllAuditor,
  getLandApplyType,
  getRegionListByParentId,
  individualApplySubmit
} from "@/api/project/fksqtc/groupApplyCheck";
export default {
  
  data() {
    return {
      props: {
        lazy: true,
        label: "name",
        value: "id",
        lazyLoad(node, resolve) {
          let id = 1;
          if (node.data) {
            id = node.data.id;
          }
          getRegionListByParentId({
            parentId: id
          }).then(res => {
            resolve(res.data);
          });
        }
      },
      regionArr: null,
      CERTIFICATE_TYPE: [],
      btnLoading:false,
      fileList: [{ type: "集体经济组织民主决策程序审查同意证明材料" }, { type: "身份证正面" }, { type: "身份证反面" }, { type: "权证证明" }],
      auditorItem1: {},
      btn: {
        bj: { name: "查看", way: "on-lookClick" },
        sc: { name: "下载", way: "on-xzClick" }
      },
      head: {
        date: "证件类型"
      },
      auditorData: [],
      tableData: [],
      option1Type:true,
      option2Type:true,
      option3Type:true,
      option4Type:true,
      option5Type:true,
      option6Type:true,
      loading: false,
      way: this.$route.query.way,
      validateForm: {
        collectiveApplyVo:{
          // landId: 1,
          applicantName: "",
          applicantNum: "",
          representName: "",
          representNum: "",
          contactName: "",
          fixedPhone: "",
          mobilePhone: "",
          address: "",
          accountBank: "",
          accountName: "",
          accountNum: "",
          certificateTypeId: "",
          certificateNum: "",
          issueCertificateDate: "",
          landArea: "",
          obligeeName: "",
          landAddress: "",
          isRemain: "YES",
          attachment1Id: "",
          attachment2Id: "",
          attachment3Id: "",
          attachment4Id: "",
          regionId: ""
        },
        collectiveTownAuditVo: {
          auditTime: null,
          auditUserId: null,
          attachment1Audit:'YES',
          attachment2Audit:'YES',
          attachment3Audit:'YES',
          attachment4Audit:'YES',
          option1Audit: "NO",
          option1Explain: "",
          option2Audit: "NO",
          option2Explain: "",
          option3Audit: "NO",
          option3Explain: "",
          option4Audit: "NO",
          option4Explain: "",
          option5Audit: "NO",
          option5Explain: "",
          option6Audit: "NO",
          option6Explain: "",
          auditResult: "APPROVED"
        }
      },
      rules: {
        collectiveApplyVo: {
          applicantName: [{ required: true, message: "请完善信息" }],
          applicantNum: [{ required: true, message: "请完善信息" }],
          representName: [{ required: true, message: "请完善信息" }],
          representNum: [{ required: true, message: "请完善信息" }],
          contactName: [{ required: true, message: "请完善信息" }],
          mobilePhone: [{ required: true, message: "请完善信息" }],
          address: [{ required: true, message: "请完善信息" }],
          accountBank: [{ required: true, message: "请完善信息" }],
          accountName: [{ required: true, message: "请完善信息" }],
          accountNum: [{ required: true, message: "请完善信息" }],
          certificateTypeId: [{ required: true, message: "请完善信息" }],
          certificateNum: [{ required: true, message: "请完善信息" }],
          issueCertificateDate: [{ required: true, message: "请完善信息" }],
          landArea: [{ required: true, message: "请完善信息" }],
          obligeeName: [{ required: true, message: "请完善信息" }],
          landAddress: [{ required: true, message: "请完善信息" }],
          isRemain:[{ required: true, message: "请完善信息" }],
          regionId:[{ required: true, message: "请完善信息" }],
        },
        collectiveTownAuditVo: {
          attachment1Audit: [{ required: true, message: "请完善信息" }],
          attachment2Audit: [{ required: true, message: "请完善信息" }],
          attachment3Audit: [{ required: true, message: "请完善信息" }],
          attachment4Audit: [{ required: true, message: "请完善信息" }],
          auditTime: [{ required: true, message: "请完善信息" }],
          auditUserId: [{ required: true, message: "请完善信息" }],
          option1Audit: [{ required: true, message: "请完善信息" }],
          option1Explain: [{ required: true, message: "请完善信息" }],
          option2Audit: [{ required: true, message: "请完善信息" }],
          option2Explain: [{ required: true, message: "请完善信息" }],
          option3Audit: [{ required: true, message: "请完善信息" }],
          option3Explain: [{ required: true, message: "请完善信息" }],
          option4Audit: [{ required: true, message: "请完善信息" }],
          option4Explain: [{ required: true, message: "请完善信息" }],
          option5Audit: [{ required: true, message: "请完善信息" }],
          option5Explain: [{ required: true, message: "请完善信息" }],
          option6Audit: [{ required: true, message: "请完善信息" }],
          option6Explain: [{ required: true, message: "请完善信息" }],
          auditResult: [{ required: true, message: "请完善信息" }]
        }
      }
    };
  },
  components: {
    upload
  },
  watch: {
    regionArr(arr) {
      this.validateForm.collectiveApplyVo.regionId = arr[2];
    }
  },
  created(){
    this.validateForm.collectiveTownAuditVo.auditTime = this.getTime();
    this.queryAllAuditor()
    this.getSelectData()
  },
  methods: {
    //最终提交
    handleSubmit(){
      this.btnLoading=true
      let flag1 = false;
      let flag2 = false;
      let uploadFlag = false;
      console.log(this.$refs["collectiveApplyVo"].validate,'this.$refs["collectiveApplyVo"]')
      this.$refs["collectiveApplyVo"].validate(valid => {
        flag1 = valid;
      });
      this.$refs["collectiveTownAuditVo"].validate(valid => {
        flag2 = valid;
      });
      if (this.validateForm.collectiveApplyVo.attachment1Id==''&&this.validateForm.collectiveApplyVo.attachment1Id==null) {
        this.$alert("请上传集体经济组织民主决策程序审查同意证明材料");
        return;
      }
      if (!this.validateForm.collectiveApplyVo.attachment2Id==''&&this.validateForm.collectiveApplyVo.attachment2Id==null) {
        this.$alert("请上传代表人身份证正面");
        return;
      }
      if (!this.validateForm.collectiveApplyVo.attachment3Id==''&&this.validateForm.collectiveApplyVo.attachment3Id==null) {
        this.$alert("请上传代表人身份证反面");
        return;
      }
      if (!this.validateForm.collectiveApplyVo.attachment4Id==''&&this.validateForm.collectiveApplyVo.attachment4Id==null) {
        this.$alert("请上传权证证明");
        return;
      }
      if (flag1 && flag2) {
        individualApplySubmit(this.validateForm).then(res => {
          this.this.btnLoading=false
        }).catch(error=>{
          this.this.btnLoading=false
        });
      } else {
        this.$alert("还有未完善的信息")
          .then(_ => {})
          .catch(_ => {});
        this.this.btnLoading=false
      }

    },
    //改变状态
    changeType(v,type){
      console.log(v)
      switch(type){
        case 1:
          this.option1Type=v=="YES"?false:true
          if(v=="YES"){
            this.validateForm.collectiveTownAuditVo.option1Explain=''
          }
          break
        case 2:
          this.option2Type=v=="YES"?false:true
          if(v=="YES"){
            this.validateForm.collectiveTownAuditVo.option2Explain=''
          }
          break
        case 3:
          this.option3Type=v=="YES"?false:true
          if(v=="YES"){
            this.validateForm.collectiveTownAuditVo.option3Explain=''
          }
          break
        case 4:
          this.option4Type=v=="YES"?false:true
          if(v=="YES"){
            this.validateForm.collectiveTownAuditVo.option4Explain=''
          }
          break
        case 5:
          this.option5Type=v=="YES"?false:true
          if(v=="YES"){
            this.validateForm.collectiveTownAuditVo.option5Explain=''
          }
          break
        case 6:
          this.option6Type=v=="YES"?false:true
          if(v=="YES"){
            this.validateForm.collectiveTownAuditVo.option6Explain=''
          }
          break
      }
    },
    //修改地址1-通讯地址
    changeArea1(val){
      console.log(val)
    },
    getSelectData() {
      let arr = ["RECLAIM_TYPE", "RECLAIM_WHERE", "CERTIFICATE_TYPE"];
      arr.forEach((item, index) => {
        getLandApplyType({
          dictionaryType: item
        }).then(res => {
          this[arr[index]] = res.data;
        });
      });
    },
    handleBeforeUpload(e) {
      this.btnLoading = true;
    },
    handleUpload(res, index) {
      this.btnLoading = false;
      this.$message({
        message: "上传成功",
        type: "success"
      });
      this.validateForm.collectiveApplyVo["attachment" + (index + 1) + "Id"] = res.data.id;
    },
    getTime() {
      var timeStr = "-";
      var curDate = new Date();
      var curYear = curDate.getFullYear(); //获取完整的年份(4位,1970-????)
      var curMonth = curDate.getMonth() + 1 < 10 ? "0" + (curDate.getMonth() + 1) : curDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
      var curDay = curDate.getDate() < 10 ? "0" + curDate.getDate() : curDate.getDate(); //获取当前日(1-31)
      var curHour = curDate.getHours() < 10 ? "0" + curDate.getHours() : curDate.getHours(); //获取当前小时数(0-23)
      var curMinute = curDate.getMinutes() < 10 ? "0" + curDate.getMinutes() : curDate.getMinutes(); // 获取当前分钟数(0-59)
      var curSec = curDate.getSeconds() < 10 ? "0" + curDate.getSeconds() : curDate.getSeconds(); //获取当前秒数(0-59)
      var Current = curYear + timeStr + curMonth + timeStr + curDay + " " + curHour + ":" + curMinute + ":" + curSec;
      return Current;
    },
    queryAllAuditor() {
      queryAllAuditor().then(res => {
        console.log(res,"res")
        this.auditorData = res.data;
      });
    },
    handleAuditUserChange(val, type) {
      this.auditorData.forEach(item => {
        if (item.userId == val) {
          this.auditorItem1 = item;
        }
      });
    },
    goBack() {
      console.log("go back");
      this.$router.go(-1);
    },
    lookClick(item) {
      console.log(item);
    },
    xzClick(item) {}
  },
  mounted() {
    console.log(this.way);
  }
};
</script>

<style lang="scss" scoped>
.form-inline-item {
  .explain {
    /deep/ .el-form-item__label {
      width: 70px !important;
    }

    /deep/ .el-textarea {
      width: 500px;
      margin-left: 0;
    }
  }

  /deep/ .el-form-item__label {
    width: 350px !important;
    text-align: left;
  }

  /deep/ .el-input {
    margin-left: 20px;
  }
  .fujianShenClass {
    /deep/ .el-form-item__label {
      width: 400px !important;
      text-align: left;
    }
  }
}
#groupApplyCheckAdd /deep/ .el-input{
  width: 200px;
}
.module-item-content {
  width: 100%;
  border-top: none;
  padding: 30px;
  padding-top: 0;
  box-sizing: border-box;
}
.zc-view {
  padding: 30px;
  .bm-view {
    width: 500px;
    height: 400px;
    margin: 0 0 20px 30px;
  }
}
.zc-view-box {
  border: 1px solid #f5f5f5;
  overflow: hidden;
  .zc-view-box-top {
    padding: 40px 20px;
    span {
      font-size: 14px;
      color: #999;
      line-height: 30px;
      margin-right: 30px;
    }
  }
  .zc-view-box-center {
    .title {
      color: #48494d;
      font-weight: bold;
      text-indent: 20px;
      line-height: 50px;
      background: #f8f8f8;
      margin-bottom: 20px;
    }
    .table-box {
      padding: 0 30px;
    }
  }
}
.form {
  padding: 10px 20px;
  /deep/ .el-form--inline /deep/ .el-form-item {
    width: 48%;
  }
}
.table-box {
  overflow: hidden;
}
</style>
